<template>
	<view class="content">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<template #top>
				<div style="background: #fff;">
					<u-tabs :list="list4" lineWidth="30" lineColor="#fff" :activeStyle="{
					            color:'#303133',
					            fontWeight: '500',
					        }" :inactiveStyle="{
					            color:'#A1ABB9',
								fontWeight: '400',
					        }" itemStyle=" height: 44px;width:33%;padding:0;" @change="tabclick">
					</u-tabs>
				</div>
			</template>

			<view class="baseCon" v-for="(item,index) in dataList" :key="index"
				@click="goPage('/pages/my/shouhou/detail?id=' + item.id)" style="margin-top: 12px;">
				<div class="same-w">
					<div class="same-lef" style="display: flex;align-items: center;">
						<span class="item-title">{{item.oilStationName}}</span>
					</div>
					<div class="same-rig">
						<span class="colorDai" v-if="item.status==4">审核中</span>
						<span class="colorno" v-if="item.status==5">已通过</span>
						<span class="colorno" v-if="item.status==7">已退款</span>
					</div>
				</div>
				<div class="zline"></div>

				<div class="zflex">
					<image class="oilImg" src="/static/images/oilImg.png"></image>
					<div style="width: calc(100% - 60px);margin-top: 12px;">
						<div class="zflex">
							<div style="font-size: 15px;font-weight: bold;margin-right: auto;">{{item.oilName}}</div>
							<div style="font-size: 13px;">约{{item.refueleQuantity}}L/kg</div>
						</div>
						<div><span class="oil-tl">实付：</span><span class="oil-tr">¥{{item.actualPayment}}</span></div>
					</div>
				</div>
				<div class="detail-lef" style="margin-top: 16px;font-size: 14px;">申请退款时间：{{item.refundDate}}</div>
			</view>
			<view style="height: 100px;"></view>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
		</z-paging>

	</view>
</template>

<script>
	import {
		listMerchant,
	} from '@/request/api.js'
	export default {
		components: {

		},
		data() {
			return {
				val: '',
				show: true,
				dataList: [],
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					status: 4, //4审核中,5已通过7已退款
				},
				list4: [{
					name: '审核中'
				}, {
					name: '已通过'
				}, {
					name: '已退款'
				}],
			}
		},
		mounted() {

		},
		onShareAppMessage() {
			return {
				title: ' ',
				path: '/pages/index/index'
			};
		},
		onShow() {
			this.initSearch()
		},
		methods: {

			initSearch() {
				this.queryParams.pageNum = 1
				this.$refs.paging.reload(false);
			},

			queryList(pageNo, pageSize) {
				let data = this.queryParams;
				data.pageNo = pageNo
				data.pageSize = pageSize
				listMerchant(this.queryParams).then((response) => {
					this.$refs.paging.complete(response.rows)
				}).catch(() => {
					this.$refs.paging.complete(false);
				})
			},

			tabclick(e) {
				if (e.index == 0) {
					this.queryParams.status = 4
				} else if (e.index == 1) {
					this.queryParams.status = 5
				} else {
					this.queryParams.status = 7
				}
				this.initSearch()
			},

			goPage(row) {
				uni.navigateTo({
					url: row,
				})
			},

		}
	}
</script>

<style scoped>
	.hdbg {
		background: #fff;
		position: relative;
		z-index: 99;
	}

	.order_head {
		display: flex;
		height: 44px;
		background: #fff;
		align-items: flex-end;
		position: relative;
		justify-content: center;
	}

	.headImg {
		width: 58px;
		height: 24px;
		position: absolute;
		left: 12px;
		top: 16px;
	}

	.wzWrap {
		display: flex;
		height: 30px;
		position: relative;
		justify-content: center;
	}

	.hline {
		height: 3px;
		width: 20px;
		background: #303133;
		border-radius: 2px;
		margin-top: 6px;
		display: inline-block;
		position: absolute;
		bottom: 0px;
		/* left: 6px; */
	}

	.selTxt {
		font-weight: 500;
		font-size: 16px;
		color: #303133;
	}

	.noTxt {
		font-weight: 500;
		font-size: 16px;
		color: #83878E;
	}

	.banView {
		display: flex;
		padding: 14px 12px;
		border-radius: 12px;
		box-sizing: border-box;
		background: #fff;
	}

	.banv50 {
		width: 50%;
		padding-left: 12px;
		box-sizing: border-box;
	}

	.banv50 .p1 {
		color: #83878E;
		margin-bottom: 4px;
	}

	.banv50 .p2 {
		font-size: 16px;
		font-weight: 500;
	}
</style>